<template>
  <div class="right-out">
    <div class="nav">我的会员</div>
    <div class="content">
      <div class="userInfo">
        <div class="avatar">
          <img
            :src="
              userInfo.avatar
                ? userInfo.avatar
                : 'https://rs.dance365.com/default_head@3x.png?imageView2/0/w/200/h/1200/format/webp/ignore-error/1'
            "
          />
        </div>
        <div class="info">
          <p v-if="userInfo.account">{{ userInfo.account }}</p>
          <p v-else>两年半个人练习生小丝巾</p>
          <p>你还不是会员</p>
        </div>
      </div>
      <div class="preferential">开通会员平均每年可省：￥9500</div>
      <div class="vip-out">
        <div
          class="vip"
          :class="{ active: index === isIndex }"
          v-for="(vip, index) in vipInfo"
          :key="vip.id"
          @click="changeVipLevel(index, vip.data.price)"
        >
          <div class="vip-title">{{ vip.data.title }}</div>
          <div class="vip-price">￥{{ vip.data.price }}</div>
          <div class="vip-average">
            合计<span>￥{{ vip.data.total_price }}</span>
            <span v-show="index === 0"> (青少年专属)</span>
            <span v-show="index === 2"> (省￥9999元)</span>
          </div>
        </div>
        <span class="recommend">推荐</span>
      </div>
      <div class="open">立即以{{ price }}元开通</div>
      <div class="agreement">
        开通技师视为同意
        <a href="https://www.dance365.com/vip-agreement" target="_blank"
          >《会员服务协议》</a
        >
      </div>
      <div class="equity">
        <p class="equity-title">会员专属权益</p>
        <ul class="equity-list">
          <li
            class="equity-item"
            v-for="(vip, index) in vipEquity"
            :key="index"
          >
            <i>
              <img :src="vip.src" alt="" />
            </i>
            <p>
              {{ vip.text }}
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Vip",
});
</script>

<script setup lang="ts">
import { reqVipInfo } from "@/apis/mine/vip";
import { onMounted, ref } from "vue";
import { useUserInfoStore } from "@/stores/user/user";
import { storeToRefs } from "pinia";

const { userInfo } = storeToRefs(useUserInfoStore());

const isIndex = ref(0);
const price = ref();
const vipInfo = ref<any>([]);

const vipEquity = ref([
  {
    src: "https://rs.dance365.com/teach_video_free.png",
    text: "719个会员专区课程免费学习",
  },
  {
    src: "	https://rs.dance365.com/member_preferential.png",
    text: "非会员专区课程可获取会员立减优惠",
  },
  {
    src: "https://rs.dance365.com/member_screen@2x.png",
    text: "同屏对比功能",
  },
  {
    src: "	https://rs.dance365.com/update_music@3x.png",
    text: "音频提取功能",
  },
  {
    src: "	https://rs.dance365.com/music_clip@3x.png",
    text: "音频剪辑功能",
  },
  {
    src: "https://rs.dance365.com/member_icon_beat.png",
    text: "节拍口令功能",
  },
  {
    src: "	https://rs.dance365.com/member_photo_download1@3x.png",
    text: "保存视频到本地相册",
  },
  {
    src: "	https://rs.dance365.com/lv_ad@3x.png",
    text: "免广告特权",
  },
  {
    src: "	https://rs.dance365.com/lv_accelerate.png",
    text: "成长等级加速特权",
  },
  {
    src: "https://rs.dance365.com/course_equity.png",
    text: "会员学习成长 优先帮扶",
  },
  {
    src: "	https://rs.dance365.com/member_logo.png",
    text: "会员专享身份标识",
  },
  {
    src: "	https://rs.dance365.com/update_equity.png",
    text: "享受新增权益和功能",
  },
]);

const getVipPayInfo = async () => {
  const re = await reqVipInfo();
  console.log(re, 111);
  vipInfo.value = re;
};

onMounted(() => {
  getVipPayInfo();
});

// 切换vip等级
const changeVipLevel = (index: number, vipPrice: number) => {
  isIndex.value = index;
  price.value = vipPrice;
};
</script>
<style scoped lang="scss">
.right-out {
  .nav {
    width: 1020px;
    background-color: white;
    border-radius: 3px;
    padding: 28px 30px;
    font-size: 14px;
    text-align: left;
    box-sizing: border-box;
    margin-bottom: 10px;
  }

  .content {
    width: 1020px;
    min-height: 700px;
    background-color: white;
    border-radius: 3px;
    box-sizing: border-box;
    padding: 30px;
    .userInfo {
      display: flex;
      justify-content: center;
      align-items: center;
      .avatar {
        width: 100px;
        height: 100px;
        img {
          width: 100px;
          height: 100px;
          border-radius: 50%;
        }
      }
      .info {
        margin-left: 21px;
        p:nth-child(1) {
          font-size: 20px;
          margin-bottom: 14px;
        }
        p:nth-child(2) {
          font-size: 14px;
          color: #f93684;
        }
      }
    }
    .preferential {
      margin: 19px 0 20px;
      font-size: 16px;
      text-align: center;
    }
    .vip-out {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: wrap;
      padding: 0 100px;

      .vip {
        margin: 10px auto;
        width: 30%;
        height: 124px;
        border: 1px solid #b1b5c1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        border-radius: 8px;
        text-align: center;
        font-size: 16px;
        ~ .vip {
          margin-left: 11px;
        }
        .vip-price {
          span {
            font-size: 30px;
          }
        }
      }
      .recommend {
        width: 75px;
        height: 35px;
        color: white;
        background-color: #ff4683;
        border: 2px solid white;
        font-size: 14px;
        border-radius: 20px;
        text-align: center;
        line-height: 35px;
        position: relative;
        left: 99px;
        top: -303px;
      }
      .active {
        color: #f93684;
        border: 2px solid #f93684;
        background-color: #f9ebf1;
        // margin-left: 45px;
      }
    }
    .open {
      width: 330px;
      height: 56px;
      font-size: 16px;
      margin: 30px auto 12px;
      color: white;
      background-color: #ff638f;
      border-radius: 10px;
      text-align: center;
      line-height: 56px;
    }
    .agreement {
      font-size: 14px;
      text-align: center;
      border-bottom: 1px solid #e3e3e3;
      padding-bottom: 37px;
      a {
        color: #f93684;
        text-decoration: none;
      }
    }
    .equity {
      width: 960px;
      border-bottom: 1px solid #e3e3e3;
      padding-bottom: 15px;
      .equity-title {
        font-size: 20px;
        font-weight: 700;
        margin: 32px 0 20px;
      }
      .equity-list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .equity-item {
          width: 129px;
          height: 129px;
          border: 1px solid #e3e3e3;
          text-align: center;
          flex-shrink: 0;
          margin: 0 30px 30px 0;
          border-radius: 8px;
          &:nth-child(6),
          &:nth-child(12) {
            margin: 0 0 30px 0;
          }
          i {
            padding: 14px 0;
            width: 46px;
            height: 42px;
            display: inline-block;
            img {
              width: 46px;
              height: 42px;
            }
          }
          p {
            font-size: 14px;
            padding: 0 6px;
          }
        }
      }
    }
  }
}
</style>
